<template>
  <div class="layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside style="background-color: rgb(48, 65, 86);" >
        <div class="sanxia_icon"></div>
        <div class="sanxia"></div>
        <el-menu
          :default-active="$route.path"
          router
          @open="meunClick"
          class="el-menu-vertical-demo"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#1890ff"
          :unique-opened="true" 
        >
          <el-menu-item index="/home">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-coordinate"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/count">
                <i class="el-icon-setting"></i>
                <span slot="title">账户修改</span>
              </el-menu-item>
              <el-menu-item index="/user_info">
                <i class="el-icon-user"></i>
                <span slot="title">个人信息</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/grade">
                <i class="el-icon-collection-tag"></i>
                <span slot="title">班级管理</span>
              </el-menu-item>
              <el-menu-item index="/student">
                <i class="el-icon-search"></i>
                <span slot="title">学生管理</span>
              </el-menu-item>
              <el-menu-item index="/leave_school">
                <i class="el-icon-map-location"></i>
                <span slot="title">离校登记</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-office-building"></i>
              <span>楼宇管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/room_list">
                <i class="el-icon-school"></i>
                <span slot="title">宿舍列表</span>
              </el-menu-item>
              <el-menu-item index="/visitor">
                <i class="el-icon-finished"></i>
                <span slot="title">访客管理</span>
              </el-menu-item>
              <el-menu-item index="/repair">
                <i class="el-icon-refresh"></i>
                <span slot="title">维修管理</span>
              </el-menu-item>
              <el-menu-item index="/enviroument">
                <i class="el-icon-view"></i>
                <span slot="title">卫生管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/money">
            <i class="el-icon-coin"></i>
            <span slot="title">费用管理</span>
          </el-menu-item>
          <el-menu-item index="/discipline">
            <i class="el-icon-files"></i>
            <span slot="title">违纪管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 内容部分 -->
      <el-container>
        <!-- 头部 -->
        <el-header height="84px">
          <nav-bar></nav-bar>
          <tag-view></tag-view>
          <el-divider></el-divider>
        </el-header>
        <el-main>
          <!-- 路由切换 el-main动画效果 -->
          <transition name="fade-transform" mode="out-in">
            <!-- 可以使用include进行特定页面缓存 -->
            <!-- 目前全部页面缓存 -->
            <keep-alive >
              <router-view></router-view>
            </keep-alive>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavBar from "../components/header/NavBar.vue";
import TagView from "../components/header/TagView.vue";

export default {
  data() {
    return {
      navList: [
        { name: "/home", navItem: "首页" },
        { name: "/count", navItem: "账户管理" },
        { name: "/user_info", navItem: "个人信息" },
      ],
    };
  },
  watch: {
    $route(to, from) {
      // console.log("#", to, from);
      // 监听路由跳转，更新tagview
      if (
        // 判断list里是否有路由跳转的to
        this.$store.state.tagViewList.indexOf(
          to.meta.bread[to.meta.bread.length - 1]
        ) == -1
      ) {
        // 没有，则添加进list
        this.$store.state.tagViewList.push(
          to.meta.bread[to.meta.bread.length - 1]
        );
        // 添加pathList 与上对应，方便路由跳转使用
        this.$store.state.tagViewPathList.push(to.path)
      }
      // 更新当前高亮的item索引
      this.$store.state.tagAct = this.$store.state.tagViewList.indexOf(
        to.meta.bread[to.meta.bread.length - 1]
      );
    },
  },
  methods: {
    meunClick() {
      // console.log(1);
    },
  },
  components: {
    NavBar,
    TagView,
  },
};
</script>

<style scoped>
.el-header {
  background-color: #fff;
  color: #333;
  padding: 0;
  /* height: 84px !important; */
  /* line-height: 60px; */
}

.el-aside {
  width: 210px !important;
  height: 100vh;
}
.sanxia_icon{
  background: url('../assets/sanxia_icon.png') no-repeat center center /100% auto;
  width:77px;
  height: 75px;
  margin: 20px auto 0px auto;
}
.sanxia{
  background: url('../assets/sanxia.png') no-repeat center center /100% auto;
  width: 80%;
  height: 75px;
  margin: 0 auto;
}
.el-main {
  overflow: auto;
  height: calc(100vh - 84px);
  padding: 40px 30px;
}
.el-menu {
  border: none;
}
.el-menu-item:hover {
  background-color: #263445;
}
.el-divider {
  margin: 0;
}
</style>